<template>
  <div class="mask">
    <div class="content">
      <div class="tips">
        <template v-if="isNormal">
          <img :src="tipsImg">
          <p v-html="html"></p>
        </template>
        <template v-else>
          <h2>利率说明</h2>
          <p v-html="html2" class="gray"></p>
        </template>
        <input class="radiu-fullW-ss-bt" type="button" value="我知道了" @click="hideMask">
      </div>
      <div class="close">
        <i class="iconfont icon-close" @click="hideMask"></i>
      </div>
    </div>
  </div>
</template>
<script>
  import tipsImg from './img/pay-tips.png'
  export default {
    name: 'Tips',
    props: {
      isNormal: Boolean,
      html: String,
      html2: String
    },
    data () {
      return {
        tipsImg: tipsImg
      }
    },
    methods: {
      hideMask () {
        this.$emit('hideMask')
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .mask{
    .content{
      position: absolute;
      top: 25%;
      left: 0;
      width: 100%;
      padding: 0 rem(75);
      .tips{
        margin-bottom: rem(40);
        background: #fff;
        padding: rem(60) rem(40) rem(90);
        border-radius: 6px;
        font-size: rem(28);
        color: #333;
        img{
          display: block;
          margin: 0 0 rem(35) 37%;
          width: rem(215);
          height: rem(173);
        }
        p{
          margin-bottom: rem(35);
          line-height: 180%;
        }
        h2{
          margin-bottom: rem(35);
          font-size: rem(36);
          color: #141414;
          text-align: center;
          font-weight: bold;
        }
        .gray{
          color: #666;
          line-height: 200%;
        }
      }
      .close{
        text-align: center;
        .iconfont{
          font-size: rem(58);
          color: #fff;
        }
      }
    }
  }
</style>
